ShaderGraph検証 : Burn(焼きこみカラー)
環境
Unity2020.1.0a14
Core RP Library 7.1.1
Shader Graph 7.1.1
Universal RP 7.1.1
はじめに
今回、ShaderGraphの焼き込みカラーの挙動を検証してみました。
BlendノードのModeをBurnに設定することで焼き込みカラー合成が使えます。
https://gyazo.com/8fb290288fc91472c2e87ea31dc16dec
焼き込みカラーには色のコントラストを強くするという特徴があります。
ShaderGraph内部実装
シェーダーグラフのBurn(焼き込みカラー)の内部実装は以下のようになっています。
code:Burn
void Unity_Blend_Burn_float4(float4 Base, float4 Blend, float Opacity, out float4 Out)
{
Out = 1.0 - (1.0 - Blend)/Base;
Out = lerp(Base, Out, Opacity);
}
焼き込みカラーの計算式
焼き込みカラー(Burn)は以下のような式で計算できるそうです。
$ C = 1-\frac{(1-B)}{A}
$ A : 元から描画されている色 (0 \leqq A \leqq 1)
$ B : 上から重ねる色 (0 \leqq B \leqq 1)
$ C : AとBを合成した結果の色
検証1 : Aを固定・Bを変化させた時のCの変化
計算式$ C = 1-\frac{(1-B)}{A}のAを固定してBを変化させる場合を考えてみます。
https://gyazo.com/8a2553a0e485343dfe7cf505ac67ae49
焼き込みカラーの計算式は以下のように書くこともできます。
$ C = \frac{1}{A}B + (1-\frac{1}{A})
これは、傾きを$ (\frac{1}{A})、切片を$ (1-\frac{1}{A})とする直線の式になっています。
グラフ)
A=0.1, 0.5, 1.0の3パターンに関して、軸Cのグラフを載せてみました。
https://gyazo.com/bc9f6919a54500e8d9227cdb2165881b https://gyazo.com/0f14c550a08f4c1aa10d08eb205d61fb https://gyazo.com/71820d460de36c6884afdd052d715aba
Aが小さくなると直線の傾きが大きくなることが読み取れます。
B = 1の時はC = 1になることも読み取れます。
検証1.1)
A = 1.0, B = グラデーション としてBurnブレンド(焼き込みカラー合成)を実行してみました。
https://gyazo.com/6156674be05253f8e0de49f82f1f4ca3
BとCは同じに見えます。
計算)
ここで、焼き込みカラー$ C = 1-\frac{(1-B)}{A}の計算式に $ A = 1を代入すると
$ C = BとなってBとCは等しくなることが分かります。
検証1.2)
A = 0.5, B = グラデーション としてBurnブレンドを実行してみました。
ブレンド結果ではグラデーションの暗い部分がより暗く補正されていることが分かります。
https://gyazo.com/b651be3761998750b8d249c8b7da99d2
BとCのグラフ)
焼き込みカラー適用前の$ Bと、適用後の$ Cのグラフを並べてみました。
https://gyazo.com/debd6f7f3b0e3fc4d4c3343fb7862f30
焼き込みカラーを適用することによって、傾きが急になっている(コントラストが強くなっている)ことが分かります。
ちなみに、A = 0.5の時、BとCの間には以下のような関係式が成立します。($ C = 1-\frac{(1-B)}{A}に$ A=0.5を代入)
$ C = 2B - 1
検証1.3)
A = 0.5, B = ノイズパターン としてBurnブレンドを実行してみました。
ノイズパターンの暗い部分がより暗く補正されていることが分かります。
https://gyazo.com/66794f89aa690fd8a39325ddb5bc00df
BとCの関係式)
Burnブレンド計算式$ C = 1-\frac{(1-B)}{A} に$ A = 0.5 を代入して、
$ C = 1-\frac{(1-B)}{0.5}
よこ軸B、たて軸Cを取ってグラフを描画すると以下のようになります。
https://gyazo.com/8d710d4087f78ac515ef75656157a04e
Bとして入力されるノイズのうち、$ B > 0.5 の成分は $ C > 0 として出力されます(白や灰色に見えます)。
$ B \leqq 0.5 の成分は $ C \leqq 0 として出力されます(黒色に見えます)。
https://gyazo.com/3c1b208fcb465ac7de1b0f83e8673ce4
BとCの比較)
ノイズ$ B のグラフに対して、補正後の$ C = 2B - 1のグラフをプロットすると、以下のようになっています。
https://gyazo.com/c66b97e75fc6ee984fa44e20075de1fc https://gyazo.com/19e6fdf8a47410ca35333baf0b16a802
$ B = 1 の部分では $ C = 1となり、 $ B \leqq 0.5 の部分では $ C \leqq 0.0(黒色) になることが分かります。
※ 今回のノイズの最大値は0.7程度ですが、ここではわかりやすさのため最大値1のグラフを使っています。
検証1.4)
A = 0.1, B = ノイズパターン としたBurnブレンド としてBurnブレンドを実行してみました。
ブレンド結果は真っ黒になっていることが見えます。 (計算結果が$ C = 0 として出力されています。)
https://gyazo.com/d005d4016c7796bb00215fef4641c8d1
BとCの関係式)
Burnブレンド計算式$ C = 1-\frac{(1-B)}{A} に$ A = 0.1 を代入して、
$ C = 1-\frac{(1-B)}{0.1}
よこ軸B、たて軸Cを取ってグラフを描画すると以下のようになります。
https://gyazo.com/c526589ee899e7fcc65b543fbbe5b3c5
値が0.9を下回るノイズ成分は0として出力されます。
今回のノイズは0.9を下回っているため、0が出力されます(ブレンド結果が黒に見えます)
検証2 : Bを固定・Aを変化させた時のCの変化
焼き込みカラーの計算式$ C = 1-\frac{(1-B)}{A}のBを固定してAを変化させる場合を考えてみます。
https://gyazo.com/8a2553a0e485343dfe7cf505ac67ae49
B=0.0, 0.5, 0.75, 0.95, 1.0の5パターンに関して、Cのグラフを載せてみました。(グラフはGeogebraで描画しました) https://gyazo.com/70268dbe3d4e98cba5d2d960cf8cc92c https://gyazo.com/1ff96542fe1f7972dac8ffecfc427a0e https://gyazo.com/d65c87b9960386ec5676a1dd0c94ef7d https://gyazo.com/22dd6042a17b25d813cfaf7af8f00afe https://gyazo.com/63e2d6e983139a557640df2a2fd4c9ca
検証2.1)
A = グラデーション, B = 1.0 としてBurnブレンド(焼き込みカラー合成)を実行してみました。
Cは白色になっています。
https://gyazo.com/1c3951a93fe79f3ab67e7f127462fdfd
B = 1.0の場合、Cは常に1.0(白色)になります。
証明)
焼き込みカラーの計算式$ C = 1-\frac{(1-B)}{A}に$ B = 1を代入して、
$ C = 1-\frac{(1-1)}{A}= 1
$ B = 1の時、$ C = 1が成立します。
検証2.2)
A = グラデーション, B = 0.5 としてBurnブレンドを実行してみました。
中央の左側が黒色になっています。
https://gyazo.com/d7b50634467b90a67c72d5db896f6b8e
グラフ)
$ B = 0.5 の時、 $ C = 1 -\frac{1}{2A} となります。
$ A と $ C のグラフを並べてみました。
https://gyazo.com/ed0c948c525d5ae71108beece532aae4https://gyazo.com/e588d88474f4151b1f38fc3341895ffc
補足1)
焼き込みカラー計算式$ C = 1-\frac{(1-B)}{A} に$ B = 0.5 を代入すると $ C = 1 -\frac{1}{2A} になります。
$ C = 1-\frac{(1-0.5)}{A} = 1-\frac{1}{2A}
補足2)
$ グラフC = 1 -\frac{1}{2A} と$ グラフ C = \frac{1}{2A} は $ C = 0.5 を軸として対称な形をしています。
https://gyazo.com/5f95eba361f6441ba781194a4117fe7a